<template>
  <view v-if="visible" class="popup">
    <view class="popup-content">
      <!-- 弹窗内容 -->
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  modelValue: Boolean,
});
const visible = ref(props.modelValue);
console.log(visible, ">>>>>>>>>>>");
// 监听 v-model 的变化
watch(
  () => props.modelValue,
  (newValue) => {
    visible.value = newValue;
  }
);
</script>

<style scoped>
.popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

.popup-content {
  /* 弹窗内容样式... */
}
</style>
